<template>
  <div class="row loginPage">
    <div class="loginFrame q-pa-lg">
      <p class="title q-pa-sm">博客后台管理系统</p>
      <q-form
        @submit="onSubmit"
        @reset="onReset"
        class="q-gutter-md"
        ref="loginForm"
      >
        <q-input
          filled
          color=""
          v-model="userName"
          label="用户名"
          lazy-rules
          :rules="[val => val !== null && val !== '' || '请输入用户名']"
        />

        <q-input
          filled
          type="password"
          v-model="password"
          label="密码"
          lazy-rules
          :rules="[val => val !== null && val !== '' || '请输入密码']"
        />

        <div>
          <q-btn label="登录" type="submit" color="primary"/>
          <q-btn label="重置" type="reset" color="primary" flat class="q-ml-sm" />
        </div>
      </q-form>
    </div>
  </div>
</template>
<style scoped>
  .loginPage{
    height: 100%;
    justify-content:center;
    align-items: center;
    background: -webkit-linear-gradient(90deg, #48c6ef, #6f86d6);
  }
  .loginFrame{
    width: 400px;
    webkit-box-shadow: 0px 10px 20px rgba(80, 84, 84, 0.55);
    background: white;
    opacity: 0.9;
    text-align: center;
    border-radius: 5px;
  }
  .loginFrame .title{
    font-size: 24px;
  }

</style>
<script>
export default {
  name: 'LoginLayout',
  data () {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    onSubmit () {
      const data = { nickname: this.userName, password: this.password }
      this.$axios
        .post('/user/login', data)
        .then(response => {
          var data = response.data
          console.log(data)
          if (data.code === 200) {
            sessionStorage.setItem('token', data.token)
            this.$q.notify({
              position: 'bottom',
              message: '登录成功!',
              timeout: 1000,
              icon: 'announcement',
              textColor: 'white',
              color: 'green-8'
            })
            this.$router.push({ path: '/manage' })
          } else {
            this.$q.notify({
              position: 'bottom',
              message: '登录失败!',
              timeout: 1000,
              icon: 'announcement',
              textColor: 'white',
              color: 'red-12'
            })
          }
        })
        .catch(err => {
          console.error('ex', err)
        })
    },
    onReset () {
      this.userName = ''
      this.password = ''
      this.$refs.loginForm.resetValidation()
    }
  }
}
</script>
